@model Component1.Pages.Components.Container

<div>
    Container `Model.Text` property: <span style="color:red;">@Model.Text</span>
    <br>
    This button below will change the `Model.Text` property of this component to current UTC time. Both components below receive the same `Model.Text` property.<br>
    <button on:click="@(() => Model.Show(DateTime.UtcNow.ToString()))" class="btn btn-primary">Show</button>
    <div class="row mt-3">
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <p>This declaration of message component does not use <strong>key</strong> attribute. Without the key attribute, the modification of the parent property is not propagated to the child component.</p>
                    <message text="@Model.Text"></message>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <p>This declaration of message component does use <strong>key</strong> attribute</p>
                    <message text="@Model.Text" key="@Model.Text"></message>
                </div>
            </div>
        </div>
    </div>
</div>
